<template>
  <div>
    <div class="userBox">
      <div class="userId" @click="toEdito">
        <div class="userImage">
          <img
            :src="'http://127.0.0.1:3000' + list.head_img"
            alt=""
            v-if="list.head_img"
          />
          <img id="userimg" src="../../assets/logo.png" alt="" v-else />
        </div>
        <div class="username">
          <span class="iconfont iconxingbienan" v-if="list.gender == 1"></span>
          <span class="iconfont iconxingbienv" v-else></span>
          <span class="nickname" v-if="list.nickname">{{ list.nickname }}</span>
          <span class="nickname" v-else>没有数据</span>
          <div class="time" v-if="list.create_date">
            {{ list.create_date.split("T")[0] }}
          </div>
          <div class="time" v-else>2020.10.1</div>
        </div>
        <div class="next">
          <span class="iconfont iconjiantou1"></span>
        </div>
      </div>
      <options text="我的关注" info="关注的用户" @combut="toConcerns"></options>
      <options text="我的跟帖" info="跟帖/回复" @combut="toReply"></options>
      <options text="我的收藏" info="视频文章" @combut="toCollection"></options>
      <options text="退出登录" @combut="exit"></options>
      <options text="设置"></options>
    </div>
  </div>
</template>

<script>
import options from "@/components/Options";
export default {
  data() {
    return {
      list: [],
      token: localStorage.getItem("token"),
      userID: localStorage.getItem("userId")
    };
  },
  mounted() {
    if (this.token == null && this.userID == null) {
      this.$dialog
        .alert({
          message: "请登录",
          theme: "round-button"
        })
        .then(() => {
          this.$router.replace("/login");
        });
    }
    this.$axios({
      url: "/user/" + this.userID,
      headers: {
        Authorization: "Bearer " + this.token
      }
    }).then(res => {
      this.list = res.data.data;
    });
  },
  components: {
    options
  },
  methods: {
    toEdito() {
      this.$router.push("/edito");
    },
    toConcerns() {
      this.$router.push("/concerns");
    },
    toReply() {
      console.log("跟贴而");
    },
    exit() {
      this.$dialog
        .confirm({
          message: "确定要退出吗"
        })
        .then(() => {
          localStorage.removeItem("token");
          localStorage.removeItem("userId");
          this.$router.replace("/login");
        })
        .catch(() => {
          return;
        });
    },
    toCollection() {
      this.$router.push("/Collection");
    }
  }
};
</script>

<style lang="less" scoped>
.userBox {
  .userId {
    background: #f2f2f2;
    box-sizing: border-box;
    padding: 8.333vw 5.556vw;
    display: flex;
    align-items: center;
    border-bottom: 1.389vw solid #e4e4e4;
    .userImage {
      img {
        width: 19.444vw;
        border-radius: 50%;
      }
    }
    .username {
      flex: 1;
      padding-left: 2.778vw;
      .iconxingbienv {
        color: #e359bf;
        font-size: 4.444vw;
      }
      .iconxingbienan {
        color: #75b1dd;
        font-size: 4.444vw;
      }
      .nickname {
        color: #343434;
        margin-left: 2.222vw;
        font-size: 4.444vw;
      }
      .time {
        margin-top: 2.778vw;
        color: #c4c4c4;
        font-size: 3.889vw;
      }
    }
  }
}
</style>